<template>
  <div class="bg-white rounded-lg p-5 shadow-sm h-full flex flex-col">
    <h2 class="text-lg font-medium mb-4">
      {{ t("system.overview.basicInfo") }}
    </h2>

    <div class="space-y-4 flex-1 flex flex-col justify-between">
      <div class="flex justify-between items-center">
        <div class="text-gray-500">Battery Capacity</div>
        <div class="font-medium">{{ formatCapacity(infoData.batteryCapacity, 'Wh') }}</div>
      </div>

      <!-- <div class="flex justify-between items-center">
        <div class="text-gray-500">String Capacity</div>
        <div class="font-medium">{{ formatCapacity(infoData.stringCapacity, 'Wp') }}</div>
      </div> -->

      <div class="flex justify-between items-center">
        <div class="text-gray-500">Create Date</div>
        <div class="font-medium">{{ formatDate(infoData.createDate) }}</div>
      </div>

      <div class="flex justify-between items-center">
        <div class="text-gray-500">Installer</div>
        <div class="font-medium">{{ infoData.installer }}</div>
      </div>

      <div class="flex justify-between items-center">
        <div class="text-gray-500">Client Classification</div>
        <div class="font-medium">{{ infoData.clientClassification }}</div>
      </div>

      <div class="flex justify-between items-center">
        <div class="text-gray-500">Client</div>
        <div class="font-medium">{{ infoData.client }}</div>
      </div>

      <div class="flex justify-between items-center">
        <div class="text-gray-500">Country/Region</div>
        <div class="font-medium">{{ infoData.countryRegion }}</div>
      </div>

      <div class="flex justify-between items-center">
        <div class="text-gray-500">Address</div>
        <div class="font-medium">{{ infoData.address }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, inject, watch } from "vue";
import { BasicInfoData } from "../../data";
import { useI18n } from "@/composables/useI18n";

const { t } = useI18n();

const props = defineProps<{
  systemId: string;
}>();

// 从父组件注入共享数据
const systemDetailData = inject<any>('systemDetailData', ref(null));
const systemDetailLoading = inject<any>('systemDetailLoading', ref(false));

const infoData = ref<BasicInfoData>({
  batteryCapacity: 0,
  stringCapacity: 0,
  createDate: '',
  installer: '',
  clientClassification: '',
  client: '',
  countryRegion: '',
  address: '',
  checkModel: 0,
  socLevel: 0,
  state: 0
});

const loading = ref(false);

// 格式化容量显示
const formatCapacity = (value: number, unit: string) => {
  if (value === 0) return `0 ${unit}`;
  return `${value.toLocaleString()} ${unit}`;
};

// 格式化日期显示
const formatDate = (dateString: string) => {
  if (!dateString) return '-';
  try {
    const date = new Date(dateString);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  } catch {
    return dateString;
  }
};

// 监听共享数据变化
watch(systemDetailData, (newData) => {
  if (newData) {
    infoData.value = newData;
  }
}, { immediate: true });
</script>
